<template>
<div class="tab-bar-item" @click="itemClick">
  <div v-if="!isactive">
    <slot name="item-icon"></slot>
  </div>
  <div v-else>
    <slot name="item-icon-active"></slot>
  </div>
  <div :class="{active:isactive}">
    <slot name="item-text"></slot>
  </div>
      <!-- </div>
      <div class="tab-bar-item">
          <img src="img\icon-houses-normal.png">
          <div>分类</div>
          </div>
      <div class="tab-bar-item">
          <img src="img\icon-houses-normal.png">
          <div>购物车</div>
          </div>
      <div class="tab-bar-item">
          <img src="img\icon-houses-normal.png">
          <div>我的</div>
          </div> -->
</div>
</template>
<script>
export default {
    name: "TabBarItem",
    props: {
          path: String
        },
    data() {
      return {
        isactive: true,
      }
    },
    // computed: {
    //   isactive(){
    //     return this.$router.path.indexOf(this.path) !== -1
    //   }
    // },
    methods: {
      itemClick(){
        this.$router.push(this.path)
      }
    },
}
</script>
<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
  }
  .active{
    color: red;
  }
</style>